import React, { useEffect,useState } from 'react'
import axios from 'axios'
import { NavBar,List,SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

const Home = () => {
    const nav= useNavigate()
    const [list,setList]=useState([])

    // 请求接口
    const getData=async()=>{
        const res=await axios.get("/api/list")
        setList(res.data.data)
    }
    
    useEffect(()=>{
     getData()
    },[])
     
    // 跳转详情
   const getDeail=(v)=>{
     nav("/deail",{state:v})
   }
  return (
    <div>
       <NavBar>
          <SearchBar placeholder='请输入内容' />
       </NavBar>
       {/* 列表 */}
       <div>
          <List>
             {
                list.length>0 &&
                list.map((v,i)=>{
                    return <List.Item key={i} onClick={()=>getDeail(v)}>
                       <img src={v.image} alt="" style={{width:"50px",height: "50px"}}/>
                       <span>{v.title}</span>
                       <span>￥{v.price}</span>
                    </List.Item>
                })
             }
          </List>
       </div>
    </div>
  )
}

export default Home
